<template>
  <div>
    <footer class="footer">
      <ul>
        <router-link to="/home" tag="li">
          <van-icon name="wap-home-o" />
          <p>首页</p>
        </router-link>
        <router-link to="/kind/全部" tag="li">
          <van-icon name="apps-o" />
          <p>分类</p>
        </router-link>
        <router-link to="/wallet" tag="li">
          <van-icon name="pending-payment" />
          <p>票夹</p>
        </router-link>
        <!-- 判断一下是否登录(即localstroage中是否有ok字段),有的话为true显示我的,没有的话为false则显示登录 -->
        <router-link v-if="falguser" to="/user" tag="li">
          <van-icon name="contact" />
          <p>我的</p>
        </router-link>
        <router-link v-else to="/login" tag="li">
          <van-icon name="contact" />
          <p>登录</p>
        </router-link>
      </ul>
    </footer>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon } from 'vant'
Vue.use(Icon)
export default {
  data () {
    return {
      falguser: false // 默认为false未登录
    }
  },
  mounted () {
    // console.log(localStorage.getItem('loginState'))
    this.falguser = localStorage.getItem('loginState') === 'ok'
    // console.log(this.falguser)
  }
}
</script>

<style lang="scss" scoped>
.footer {
  position: fixed;
  bottom: 0;
}
/deep/ .van-icon {
  font-size: 0.24rem;
}
</style>
